<template>
  <div class="merchant-report">
    <el-table
      :data="merchantData"
      border
      stripe
      v-loading="loading"
      :header-cell-style="{ background: '#f5f7fa' }"
      height="500px"
      style="width: 100%;">
      
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      
      <el-table-column prop="ranking" label="排名" width="80" align="center"></el-table-column>
      
      <el-table-column prop="merchant_id" label="商户ID" width="100" align="center"></el-table-column>
      
      <el-table-column prop="merchant_name" label="商户名称" min-width="160"></el-table-column>
      
      <el-table-column prop="contacts" label="联系人" min-width="120"></el-table-column>
      
      <el-table-column prop="contacts_tel" label="联系电话" min-width="140"></el-table-column>
      
      <el-table-column prop="total_commission" label="总佣金(元)" min-width="130" align="right">
        <template slot="header">
          <span>总佣金(元)
            <el-tooltip placement="top">
              <div slot="content" style="max-width: 420px; line-height: 1.5;">
                <div><strong>定义：</strong>商户在查询时间范围内"产生的佣金总金额"</div>
                <div><strong>计算：</strong>SUM(佣金金额)</div>
                <div><strong>来源：</strong><code>consul_nfc_commission_records</code>（已结算+待结算均计入）</div>
                <div><strong>筛选：</strong>受时间范围 / 商户筛选限制</div>
                <div><strong>示例：</strong>本期佣金记录金额 120、80、50 → 总佣金 = 250 元</div>
              </div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
        <template slot-scope="scope">
          <span style="color: #E6A23C; font-weight: bold;">{{ formatAmountYuan(scope.row.total_commission) }}</span>
        </template>
      </el-table-column>
      
      <el-table-column prop="commission_records" label="佣金记录数" min-width="120" align="center">
        <template slot="header">
          <span>佣金记录数
            <el-tooltip placement="top">
              <div slot="content" style="max-width: 380px; line-height: 1.5;">
                <div><strong>定义：</strong>商户在查询时间范围内的佣金交易笔数</div>
                <div><strong>计算：</strong>COUNT(佣金记录)</div>
                <div><strong>来源：</strong><code>consul_nfc_commission_records</code></div>
                <div><strong>示例：</strong>本期产生 5 条佣金记录 → 佣金记录数 = 5</div>
              </div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
      
      <el-table-column prop="fission_count" label="裂变数量" min-width="110" align="center">
        <template slot="header">
          <span>裂变数量
            <el-tooltip placement="top">
              <div slot="content" style="max-width: 380px; line-height: 1.5;">
                <div><strong>定义：</strong>商户在查询时间范围内发起的裂变活动数量</div>
                <div><strong>计算：</strong>COUNT(裂变活动)</div>
                <div><strong>来源：</strong><code>consul_nfc_fission</code></div>
                <div><strong>示例：</strong>本期发起 3 次裂变活动 → 裂变数量 = 3</div>
              </div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
      
      <el-table-column prop="performance_score" label="绩效分数" min-width="110" align="center">
        <template slot="header">
          <span>绩效分数
            <el-tooltip placement="top">
              <div slot="content" style="max-width: 420px; line-height: 1.5;">
                <div><strong>定义：</strong>综合衡量商户绩效的打分（越高越好）</div>
                <div><strong>计算规则：</strong></div>
                <div>• 佣金贡献度：每 10 元佣金得 1 分</div>
                <div>• 交易活跃度：每笔佣金记录得 2 分</div>
                <div>• 推广活跃度：每次裂变活动得 5 分</div>
                <div><strong>示例：</strong>佣金 250→25 分；记录 5→10 分；裂变 3→15 分；总分=50 分</div>
              </div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
        <template slot-scope="scope">
          <span :style="{ color: scope.row.performance_score >= 50 ? '#67C23A' : scope.row.performance_score >= 20 ? '#E6A23C' : '#F56C6C', fontWeight: 'bold' }">
            {{ scope.row.performance_score }}分
          </span>
        </template>
      </el-table-column>
      
      <el-table-column prop="performance_level" label="绩效等级" min-width="130" align="center">
        <template slot="header">
          <span>绩效等级
            <el-tooltip placement="top">
              <div slot="content" style="max-width: 380px; line-height: 1.5;">
                <div><strong>定义：</strong>基于绩效分数划分的等级</div>
                <div><strong>划分区间：</strong>A级≥50；B级 20–49；C级 10–19；D级 &lt; 10</div>
                <div><strong>示例：</strong>本期得分 50 → A级</div>
              </div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
        <template slot-scope="scope">
          <el-tag :type="getPerformanceTagType(scope.row.performance_level)" size="mini">
            {{ scope.row.performance_level }}
          </el-tag>
        </template>
      </el-table-column>
      
    </el-table>
  </div>
</template>

<script>
import { nfcReportsAPI } from '@/api/nfc'

export default {
  name: 'MerchantReport',
  props: {
    filters: { type: Object, required: true }
  },
  data() {
    return {
      loading: false,
      merchantData: []
    }
  },
  watch: {
    filters: { handler() { this.loadData() }, deep: true }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        this.loading = true
        const response = await nfcReportsAPI.getMerchantPerformance(this.filters)
        // 修复：使用正确的数据路径 response.data.merchants
        this.merchantData = (response.data && response.data.merchants) || []
      } catch (error) {
        console.error('加载商户数据失败：', error)
        this.$message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    },
    
    // 金额格式化：整数不带小数，小数保留两位，带¥前缀
    formatAmountYuan(amount) {
      const n = Number(amount)
      if (!isFinite(n)) return '¥0'
      return Math.floor(n) === n ? `¥${n}` : `¥${n.toFixed(2)}`
    },
    
    // 获取绩效等级标签类型
    getPerformanceTagType(performanceLevel) {
      if (!performanceLevel) return 'info'
      const level = performanceLevel.substring(0, 1) // 提取等级字母（A、B、C、D）
      const tagTypes = {
        'A': 'success',  // 绿色
        'B': 'primary',  // 蓝色
        'C': 'warning',  // 橙色
        'D': 'danger'    // 红色
      }
      return tagTypes[level] || 'info'
    }
  }
}
</script>

<style scoped>
.merchant-report {
  padding: 0;
}

/* 表格样式优化 */
.merchant-report .el-table {
  width: 100% !important;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
}

/* 表格头部样式 */
.merchant-report .el-table th {
  background-color: #f5f7fa !important;
  color: #303133;
  font-weight: 500;
}

/* 表格行样式 */
.merchant-report .el-table tr:hover td {
  background-color: #F5F7FA !important;
}

/* 斑马纹样式 */
.merchant-report .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #FAFAFA;
}

/* 表格边框样式 */
.merchant-report .el-table--border td,
.merchant-report .el-table--border th {
  border-right: 1px solid #EBEEF5;
}

/* 序号列样式 */
.merchant-report .el-table__column--selection .cell,
.merchant-report .el-table .el-table-column--type-index .cell {
  text-align: center;
  color: #909399;
  font-weight: 500;
}

/* 排名列样式 */
.merchant-report .el-table-column:nth-child(2) .cell {
  font-weight: bold;
  color: #409EFF;
}

/* 商户名称列样式 */
.merchant-report .el-table-column:nth-child(4) .cell {
  font-weight: 500;
  color: #303133;
}

/* 绩效分数和等级列特殊样式 */
.merchant-report .el-tag {
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .merchant-report .el-table {
    font-size: 12px;
  }
  
  .merchant-report .el-table th {
    padding: 8px 4px;
  }
  
  .merchant-report .el-table td {
    padding: 8px 4px;
  }
}

/* 工具提示样式 */
.merchant-report .el-tooltip .el-icon-question {
  color: #909399;
  margin-left: 4px;
  cursor: help;
}

.merchant-report .el-tooltip .el-icon-question:hover {
  color: #409EFF;
}
</style>